import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            login: false
        }
    }

    componentDidMount() {
        console.log("componentDidMount");
        axios.get("/api/user/info").then((response) => {
            console.log("response");
            console.log(response);
            this.setState({
                login: true,
                user: response.data.username
            })
        }).catch((error) => {
            if (error.response) {
                if (error.response.status === 401) {
                    console.log(error.response.data);
                }
            }
        })
    }

    getContent = () => {
        if (this.state.login) {
            return (
                <p className="App-intro" style={{color: '#F40', padding: '20px'}}>
                    {this.state.user},您已登录
                </p>
            )

        }
        return (
            <p className="App-intro">
                To sign in, click <Link to="/login">Login Page</Link>and input your account.
            </p>
        )
    };

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src="./logo.png" className="App-logo" alt="logo"/>
                    <h1 className="App-title">Welcome to Shinda-Maru</h1>
                </header>
                {this.getContent()}
            </div>
        );
    }
}

export default App;
